import React, { useContext } from 'react';
import classNames from 'classnames';
import { MenuContext } from './Menu';

export interface MenuItemProps {
    index ?: string;
    disabled ?: boolean;
    className ?: string;
    style ?: React.CSSProperties;
}

export const MenuItem: React.FC<MenuItemProps> = (props) =>{
    const { 
        index, 
        disabled,
        className,
        style,
        children
    } = props
    const context = useContext(MenuContext)
    const classes = classNames("wave-menu-item", className, {
        "wave-is-disabled": disabled,
        "wave-is-active": context.index === index
    })
    const handleClick = ()=>{
        if(context.onSelect&& !disabled && (typeof index === "string")){
            context.onSelect(index)
        }
    }
    return (
        <li className={classes} style={style} onClick={handleClick}>
            {children}
        </li>
    )
}

MenuItem.displayName = "MenuItem"

